<%--
  Created by IntelliJ IDEA.
  User: XML
  Date: 2018/9/22
  Time: 23:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"  isELIgnored="false" %>
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echarts/echarts.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echart/echarts-gl.min.js"></script>
<%--<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echart/ecStat.min.js"></script>--%>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echart/dataTool.min.js"></script>
<%--<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echart/china.js"></script>--%>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echart/world.js"></script>
<%--<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>--%>
<%--<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echart/bmap.min.js"></script>--%>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echart/simplex.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var dataMap = {};
    function dataFormatter(obj) {
        var pList = [
            '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
        ];
        var temp;
        for (var year = 2016; year <= 2018; year++) {
            var max = 0;
            var sum = 0;
            temp = obj[year];
            for (var i = 0, l = temp.length; i < l; i++) {
                max = Math.max(max, temp[i]);
                sum += temp[i];
                obj[year][i] = {
                    name : pList[i],
                    value : temp[i]
                }
            }
            obj[year + 'max'] = Math.floor(max / 100) * 100;
            obj[year + 'sum'] = sum;
        }
        return obj;
    }

    dataMap.dataAll = dataFormatter({
        //max : 60000,
        2016: [
            82.00, 93.20, 91.11, 93.54, 120.88, 130.13, 120.48, 130.55, 143.11, 140.10, 200.44, 184.51
        ],
        2017: [112.83, 122.58, 134.59, 133.58, 147.95, 132.02, 169.72, 188.94, 211.8, 210.11, 395.96, 418.09],
        2018: [88.8, 103.35, 116.81, 126.77, 134.94, 139.43, 162.76, 150.14, 193.81, 245.05, 325.1, 411.03]
    });


    option = {
        baseOption: {
            timeline: {
                // y: 0,
                autoPlay: true,
                playInterval: 2000,
                data: [
                    '2016-01-01',
                    '2017-01-01',
                    '2018-01-01'
                ],
                label: {
                    formatter : function(s) {
                        return (new Date(s)).getFullYear();
                    }
                }
            },
            title: {
                subtext: ''
            },
            tooltip: {
            },
            legend: {
                x: 'right',
                data: ['产品总销量'],
                selected: {
                    '产品总销量': true
                }
            },
            calculable : true,
            grid: {
                top: 80,
                bottom: 100,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            show: true,
                            formatter: function (params) {
                                return params.value.replace('\n', '');
                            }
                        }
                    }
                }
            },
            xAxis: [
                {
                    'type':'category',
                    'axisLabel':{'interval':0},
                    'data':[
                        '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
                    ],
                    splitLine: {show: false}
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '总销量（万元）'
                }
            ],

        },
        options: [
            {
                title: {
                    'text':'2016淘有货销量汇总',
                },
                series: [
                    {  'name':'总销量',
                        'type':'line',
                        lineStyle:{color: '#2EC7C9'},
                        'markLine':{
                            symbol : ['arrow','none'],
                            symbolSize : [4, 2],
                            itemStyle : {
                                normal: {
                                    label:{
                                        position:'left',
                                        formatter:function(params){
                                            return Math.round(params.value);
                                        },
                                        textStyle:{color:'#2EC7C9'}
                                    }
                                }
                            },
                            'data':[{'type':'average','name':'平均值'}]
                        },
                        'data': dataMap.dataAll['2016']}
                ]
            },
            {
                title : {text: '2017淘有货销量汇总'},
                series : [
                    {'data': dataMap.dataAll['2017']}
                ]
            },
            {
                title : {text: '2018淘有货销量汇总'},
                series : [
                    {'data': dataMap.dataAll['2018']}
                ]
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>